<template>
  <van-nav-bar title="物流详情" left-text="" left-arrow @click-left="goBack" />
  <!-- 订单详细 -->
  <section class="aui-scrollView">
    <!-- 订单状态 -->
    <div class="aui-pay-change">
      <div class="aui-flex">
        <div class="aui-flex-box">
          <h3>{{ info.status_text }}</h3>
        </div>
        <div class="aui-pay-zfb">
          <img src="/assets/images/icon-zfb.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 收货地址 -->
    <div class="aui-flex">
      <div class="aui-flex-add">
        <img :src="LoginUser.avatar" alt="" />
      </div>
      <div class="aui-flex-box">
        <h3>
          {{ info.address.consignee }} <em>{{ info.address.mobile }}</em>
        </h3>
        <p>{{ info.address.address_text }}</p>
      </div>
    </div>

    <van-steps direction="vertical" :active="0">
      <van-step v-for="(item, index) in expressdata" :key="index">
        <h3>{{ item.status }}</h3>
        <p>{{ item.time }}</p>
      </van-step>
    </van-steps>
  </section>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const LoginUser = reactive(cookies.get("LoginUser"));
const orderid = ref(0);
const expressdata = ref([]);
const info = ref({
    address: {}
});
onBeforeMount(() => {
  orderid.value = route.query.orderid ? route.query.orderid : 0;
  getorderInfoData();
});
const goBack = () => {
  router.push("/business/order/index");
};

const getorderInfoData = async () => {
  let result = await Api.orderExpress({
    busid: LoginUser.id,
    orderid: orderid.value,
  });
  if (result.code) {
    expressdata.value = result.data.express;
    info.value = result.data.orderinfo;
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>